<template>
  <div>
    <Modal v-model="replyPop" width="600" class-name="vertical-center-modal" :closable="false" :mask-closable="false">
      <!-- 页头 -->
      <div slot="header" class="head-sty">
        <div class="title">{{ $t('order.reply_pop_tit') }}</div>
        <Icon type="md-close" class="close" @click="closeMet()" />
      </div>
      <!-- 内容 -->
      <div class="content-wrap">
        <Input v-model="form.content" type="textarea" maxlength="200" show-word-limit
          :autosize="{ minRows: 6, maxRows: 6 }" :placeholder="$t('order.reply_input_tip')" />
        <Upload :show-upload-list="false" :headers="{
          'X-Access-Token': userToken,
          'lang': 'en_US'
        }" biz="chat" :data="{
          biz: 'custom'
        }" name="file" :disabled="uploadLoading" :max-size="3072" :before-upload="() => handleBeforeUpload()"
          :on-success="(response) => onSuccess(response)" :on-exceeded-size="() => handleMaxSize(file)"
          :action="uploadURL" :accept="'.png,.jpg,.jpeg'">
          <div class="loading-wrap" v-if="uploadLoading">
            <t-loading></t-loading>
          </div>
          <div v-if="form.imgUrl != '' && !uploadLoading" class="preview-img">
            <img class="upload-image" :src="form.imgUrl" alt="" />
            <img src="@/assets/images/public/delete.png" class="delete-icon" @click="removeMet($event)" alt="">
            <div class="overlay"></div>
          </div>
          <div v-if="!form.imgUrl & !uploadLoading" class="upload-sty">
            <img src="@/assets/images/public/upload_img.webp" class="upload-img" alt="">
          </div>
        </Upload>
      </div>
      <!-- 底部 -->
      <div slot="footer" class="footer-wrap">
        <div class="cancel-btn" @click="closeMet()">{{ $t('user.cancel') }}</div>
        <div class="confirm-btn" @click="confirmMet()">{{ $t('order.sub_text_btn') }}</div>
      </div>
    </Modal>
  </div>
</template>
<script>
import { commonUpload } from "@/api/sys";
import TLoading from "@/components/t-loading";
import { handleUserReplyMessage } from "@/api/order";
import { debounce } from "@/common/common";
export default {
  components: { TLoading },
  data() {
    return {
      replyPop: false,
      form: {
        imgUrl: ''
      },
      uploadLoading: false,
      userToken: localStorage.getItem("USER_TOKEN"),
      uploadURL: commonUpload(),
    }
  },
  methods: {
    open(orderItemNo) {
      this.form.orderItemId = orderItemNo;
      this.replyPop = true;
    },
    closeMet() {
      this.replyPop = false;
      this.form.imgUrl = '';
      this.form.content = '';
      this.form.orderItemId = '';
    },

    handleMaxSize(file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        this.$webToastObj({
          message: this.$t('order.success_upload_tip'),
          time: 2000
        });
        let data = response.result;
        this.form.imgUrl = data.url;
      } else {
        this.$webToastObj({
          message: response.message,
          time: 2000
        });
      }
    },
    onError() {
      this.$webToastObj({
        message: this.$t('user.uploadFailure'),
        time: 2000
      });
    },
    handleBeforeUpload() {
      this.uploadLoading = true;
    },
    removeMet(event) {
      event.stopPropagation();
      // 删除图片
      this.form.imgUrl = '';
    },
    confirmMet: debounce(function () {
      if (!this.form.imgUrl && !this.form.content) {
        this.$Message.warning(this.$t('order.no_info_tip'));
        return;
      }
      handleUserReplyMessage(this.form).then((res) => {
        if (res.code == 200) {
          this.replyPop = false;
          this.$Message.success(this.$t('order.reply_content_success'));
          this.$store.dispatch("getUserInfo");
          this.$emit('updateMet');
          this.form.imgUrl = '';
          this.form.content = '';
          this.form.orderItemId = '';
        }
      })
    })
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 12px;

  .ivu-modal-header {
    border: none;
    padding: 32px 24px 26px 32px;
  }

  .ivu-modal-body {
    height: 260px;
    padding: 0 32px;
  }

  .ivu-modal-footer {
    border: none;
    padding: 32px;
  }
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-weight: 600;
      font-size: 24px;
      color: #1E1714;
      line-height: 28px;
    }

    .close {
      color: #1E1714;
      font-size: 36px;
      font-weight: 500;
      cursor: pointer;
    }
  }

  .content-wrap {
    :deep(.ivu-input) {
      padding: 12px;
      font-weight: 500;
      font-size: 16px;
      line-height: 19px;
    }

    :deep(.ivu-input-word-count) {
      font-weight: 500;
      font-size: 16px;
      color: #AEB0B9;
      line-height: 18px;
    }

    .loading-wrap {
      margin-top: 16px;
    }

    .preview-img {
      margin-top: 16px;
      position: relative;
      cursor: pointer;

      .upload-image {
        width: 100px;
        height: 100px;
        border-radius: 8px;
      }

      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        display: block;
        border-radius: 8px;
        background-color: rgba(0, 0, 0, 0.1);
      }

      .delete-icon {
        display: none;
      }
    }

    .preview-img:hover>.overlay {
      display: block;
      border-radius: 8px;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .preview-img:hover>.delete-icon {
      display: block;
      width: 24px;
      height: 24px;
      position: absolute;
      top: 38px;
      left: 38px;
      z-index: 2,
    }

    .upload-sty {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      border: 2px dashed #E1E2E4;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: relative;
      margin-top: 16px;

      .upload-img {
        width: 36px;
        height: 36px;
      }
    }
  }

  .footer-wrap {
    display: flex;
    justify-content: end;
    gap: 20px;

    .cancel-btn {
      min-width: 112px;
      height: 46px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #DCDFE6;
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .confirm-btn {
      min-width: 112px;
      height: 46px;
      border-radius: 8px 8px 8px 8px;
      background: #FF186B;
      font-family: Open Sans, Open Sans;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 19px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
